<template>
  <div v-show="isShowLogin" class="mask"></div>
  <div v-show="isShowLogin" class="dialog">
    <ul class="login-top">
      <li class="active">QQ登录</li>
      <li>微信登录</li>
    </ul>
    <div class="login-main">
      <!-- 左边 -->
      <div class="main-left">
        <div class="main-leftBox">
          <div class="main-title">验证码登录</div>
          <p>推荐使用<i class="link_tips">快捷登录</i>,防止盗号</p>
        </div>
        <div class="main-form">
          <form action="#">
            <input
              class="form-input"
              placeholder="支持QQ号/邮箱/手机号登录"
              type="text"
              v-model="phone"
            />
            <input
              class="form-input"
              v-model="code"
              placeholder="请输入验证码"
              type="text"
            />
            <div v-show="!disableSend" @click="SendCode" class="verification">
              发送验证码
            </div>
            <div v-show="disableSend" @click="SendCode" class="verification">
              验证码已发送{{ count }}
            </div>
            <button @click.prevent="GoLogin" class="form-btn">登录</button>
          </form>
        </div>
        <ul class="main-footer">
          <li>找回密码</li>
          <li>注册账号</li>
          <li>意见反馈</li>
        </ul>
      </div>
      <!-- 右边 -->
      <ul class="main-right">
        <li><i class="accredit_site">QQ音乐</i>将获取以下权限：</li>
        <li>
          <input type="checkbox" id="all" class="radio-All" />
          <label for="all">全选</label>
        </li>
        <li>
          <input type="checkbox" id="all" class="radio-All" />
          <label for="all">使用你的QQ头像、昵称信息</label>
        </li>
        <li>
          <input type="checkbox" id="all" class="radio-All" />
          <label for="all">你的QQ好友关系</label>
        </li>
        <li>
          授权即同意 <i class="accredit_site">服务协议</i> 和
          <i class="accredit_site">QQ隐私保护指引</i>
        </li>
      </ul>
    </div>
    <span class="close-Login" @click="WakeupSwitch">✕</span>
  </div>
</template>

<script>
export default {
  name: 'Mask',
}
</script>

<script setup>
import { ref } from 'vue'
import { getCode, checkCode, getToken } from '@/api/Login'
import { useRouter } from 'vue-router'
import { setToken } from '@/utils/userAbout.js'
import { useUserInfo } from '@/store/modules/userInfo'

defineProps(['isShowLogin'])
const emit = defineEmits(['isShowSwichLogin'])

const WakeupSwitch = () => {
  emit('isShowSwichLogin', false)
}
const UserInfo = useUserInfo()
const phone = ref('')
const code = ref('')
const disableSend = ref(false)
const count = ref(60)
const router = useRouter()
let timer
const SendCode = async () => {
  if (disableSend.value) {
    alert('验证码已经发过了')
    return
  }
  let commonReg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
  if (!commonReg.test(phone.value)) {
    alert('手机号格式不规范')
    return
  }
  const result = await getCode(phone.value)
  if (result.data) {
    disableSend.value = true
    setCountDown()
  }
}

const setCountDown = () => {
  count.value = 60
  timer = setInterval(() => {
    const timeCount = count.value - 1
    if (timeCount <= 0) {
      clearInterval(timer)
      disableSend.value = false
      count.value = 60
      return
    }
    count.value = timeCount
  }, 1000)
}

const GoLogin = async () => {
  clearInterval(timer)
  const result = await checkCode(phone.value, code.value)
  if (!result.data) {
    return
  }
  const res = await getToken(phone.value, code.value)
  if (res.code === 200) {
    setToken(res.token)
    localStorage.setItem('cookie', res.cookie)
    UserInfo.$patch({
      nickname: res.profile.nickname,
      avatarUrl: res.profile.avatarUrl,
      userId: res.profile.userId,
    })
    WakeupSwitch()
    router.push({
      name: 'Home',
    })
  }
}
</script>

<style scoped lang="less">
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 700px;
  height: 482px;
  background-color: #fff;
  z-index: 1000;
  border-radius: 2px;
}
.close-Login {
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
  font-size: 20px;
}
.login-top {
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: center;
  li {
    cursor: pointer;
    margin: 0 60px;
    font-size: 16px;
    font-weight: 400;
    line-height: 55px;
    text-align: center;
  }
  .active {
    color: #31c27c;
  }
}
.login-main {
  display: flex;
  justify-content: space-between;
  // left
  .main-left {
    flex: 1;
    .main-leftBox {
      position: relative;
      margin: 0 auto 26px;
      z-index: 11;
      font-size: 12px;
      line-height: 16px;
      color: #000;
      text-align: center;
      .main-title {
        font-size: 20px;
        line-height: 28px;
        color: #000;
        margin: 16px 0 6px;
      }
      .link_tips {
        color: #2e77e5;
      }
    }
    .main-form {
      position: relative;
      width: 250px;
      margin: 0 auto;
      font-size: 12px;
      .form-input {
        width: 232px;
        position: relative;
        height: 16px;
        padding: 10px 0 10px 16px;
        line-height: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: 0 0;
        color: #000;
        font-size: 13px;
        margin-top: 10px;
        &:focus {
          border: 0;
        }
      }
      .verification {
        position: absolute;
        top: 69px;
        right: 11px;
        border: 1px solid #ccc;
        cursor: pointer;
      }
      .form-btn {
        width: 100%;
        line-height: 18px;
        border: none;
        font-size: 14px;
        font-weight: 400;
        color: #fff;
        cursor: pointer;
        height: 38px;
        border-radius: 4px;
        background-color: #09f;
        margin-top: 30px;
      }
    }

    .main-footer {
      height: 16px;
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: #000;
      line-height: 16px;
      overflow: hidden;
      margin-top: 20px;
      li {
        display: inline-block;
        margin-right: 20px;
      }
    }
  }
  .main-right {
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .accredit_site {
      margin-right: 5px;
      color: #2e77e5;
    }
    li {
      margin: 5px 0;
      height: 20px;
      line-height: 20px;
      input {
        visibility: hidden;
        &::after {
          visibility: visible;
          content: '';
          display: inline-block;
          width: 16px;
          height: 16px;
          font-size: 12px;
          cursor: default;
          box-sizing: border-box;
          background: url('./img/checkbox-checked.png');
          background-size: contain;
          background-repeat: no-repeat;
        }
      }
      label {
        margin-left: 10px;
      }
    }
  }
}
</style>
